<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王建烨个人主页</title>
</head>
<body>
<!-- 在Html页面中完成和后台交互的方法 -->
<!-- 1.Javascript的Ajax实现 -->
<!-- 2.Jquery对Ajax进行封装：load()，$.ajax()，$.post()，$.get()，$.getJSON() -->
<h1>读取数据库</h1>
<button id="jquery">获取用户(Jquery方式)</button><button id="axios">获取用户(Axios方式)</button>
<table border="1" style="margin-top: 20px">
    <thead>
    <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>邮箱</th>
    </tr>
    </thead>
    <tbody id="app">

    </tbody>
</table>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/axios.js"></script>
<script>
    $('#jquery').on('click',function (){
        $.ajax({
            url:'/users/findAll',
            type:'get',
            data:{'t':Math.random()},
            beforeSend:function (http){
                $('#btn').text('正在获取...');
            },
            success:function(result) {
                $('#btn').text('重新获取');
                console.log(result);
                result.forEach(function (json,index){
                    console.log(json);
                   $('#app').append('<tr><td>'+json.id+'</td><td>'+json.username+'</td><td>'+json.password+'</td><td>'+json.email+'</td></tr>');
                });
            }
        });
    });
    $('#axios').on('click',function (){
        axios.get('/users/findAll?t='+Math.random()).then(function (result){
            console.log(result);
            result.data.forEach(function (json,index){
                console.log(json);
                $('#app').append('<tr><td>'+json.id+'</td><td>'+json.username+'</td><td>'+json.password+'</td><td>'+json.email+'</td></tr>');
            });
        });
    });
</script>
</body>
</html>